<template>
  <div class="component breadcrumb">
    <ul class="bc_wrapper">
      <li class="bc_item">
        <span>{{ currentRouters[currentRouters.length - 1].title }}</span>
      </li>
    </ul>
    <div class="btn_group">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useBasicStore from '@/store/basic'

const store = useBasicStore()

const currentRouters = computed(() => {
  return store.currentRouters ?? []
})
</script>

<style lang="less" scoped>
.breadcrumb {
  width: 100%;
  height: 41px;
  line-height: 40px;
  display: flex;
  flex-flow: row nowrap;
  .bc_wrapper {
    display: flex;
    flex-flow: row nowrap;
    width: 40%;
    .bc_item {
      width: 120px;
      padding: 0 10px;
      font-size: 13px;
      text-align: center;
      cursor: pointer;
      span {
        display: inline-block;
        height: 40px;
      }
    }
  }
  .btn_group {
    width: 60%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    padding: 0 20px;
    :deep(span) {
      display: inline-block;
      margin: 6px 10px;
      cursor: pointer;
    }
  }
}
</style>
